<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锤子商城</title>
		<link rel="shortcut icon" href="/favicon.ico"/>
		<link rel="stylesheet" href="/lib/swiper-master/swiper-bundle.min.css">
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/lib/icon-font/iconfont.css" />
		<link rel="stylesheet" href="/css/index.css" />
		<link rel="stylesheet" href="/css/header.css"/>
		<link rel="stylesheet" href="/css/footer.css"/>
		<link rel="stylesheet" href="/css/nav.css"/>
	</head>
	<body>
		<header>
		</header>
		<!-- 滚动时nav添加class="scrollnav" -->
		<nav>
		</nav>
		<section>
			<div class="container">

				<!-- 轮播图 -->
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a><img src="img/swiper5.jpg" /></a>
						</div>
						<div class="swiper-slide">
							<a><img src="img/swiper4.png" /></a>
						</div>
						<div class="swiper-slide">
							<a><img src="img/swiper1.png" /></a>
						</div>
						<div class="swiper-slide">
							<a><img src="img/swiper2.png" /></a>
						</div>
						<div class="swiper-slide">
							<a><img src="img/swiper3.png" /></a>
						</div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>

				<!-- 轮播图下方四个商品展示框 -->
				<div class="imgbar">
					<ul>
						<li>
							<a><img src="img/imgbar1.jpg" /></a>
						</li>
						<li>
							<a><img src="img/imgbar2.png" /></a>
						</li>
						<li>
							<a><img src="img/imgbar3.jpg" /></a>
						</li>
						<li>
							<a><img src="img/imgbar4.jpg" /></a>
						</li>
					</ul>
				</div>

				<!-- 热门商品展示部分 -->
				<div class="hotbar">
					<div class="hottitle">
						<h2>热门商品</h2>
						<aside>
							<span class="goleft">&lt;</span>
							<span class="goright btnactive">&gt;</span>
						</aside>
					</div>
					<ul id="hotProductsContent">
						<!-- <li>
							<a><img src="img/hot1.png" /></a>
							<h3>坚果R2</h3>
							<p>是下一代手机，更是下一代电脑</p>
							<b></b>
							<em>&yen;4,799.00</em>
							<i class="showtips">买赠</i>
							<aside>大促</aside>
						</li>
						<li>
							<a><img src="img/hot2.png" /></a>
							<h3>Smartisan TNT 大满足套装</h3>
							<p>下一代手机，下一代电脑</p>
							<b></b>
							<em>&yen;6,999.00</em>
							<i>买赠</i>
							<aside>大促</aside>
						</li>
						<li>
							<a><img src="img/hot3.png" /></a>
							<h3>2020年足迹系列卫衣 人类首次突破音速</h3>
							<p>精心裁剪、版型百搭、舒适服帖、易于打理</p>
							<b>
								<span class="black checked"></span>
								<span></span>
								<span class="blue"></span>
								<span class="gray"></span>
							</b>
							<em>&yen;224.00<del>&yen;249.00</del></em>
							<i>买赠</i>
							<aside>大促</aside>
						</li>
						<li>
							<a><img src="img/hot4.jpg" /></a>
							<h3>Smartisan 真无线蓝牙耳机</h3>
							<p>抖音文创限量款</p>
							<b>
							</b>
							<em>&yen;279.00<del>&yen;299.00</del></em>
							<i>买赠</i>
							<aside class="showtips">大促</aside>
						</li> -->

					</ul>
					<!-- 根据后台数据渲染出li里面的数据 -->
					<script type="text/html" id="hotProdTemplate">
						{{each prodlist item}}
						<li>
							<a><img src="{{item.imgUrl}}" /></a>
							<h3>{{item.tittle}}</h3>
							<p>{{item.description}}</p>
							<b>
								{{if item.color}}
								{{each item.color subItem}}
								<span class="{{subItem}}"></span>
								{{/each}}
								{{/if}}
							</b>
							<em>&yen;{{item.price}}{{if item.oldPrice}}<del>&yen;{{item.oldPrice}}</del>{{/if}}</em>
							{{if item.tag}}<i class="showtips">{{item.tag}}</i>{{/if}}
							{{if item.aside}}<aside class="showtips">{{item.aside}}</aside>{{/if}}
						</li>
						{{/each}}
					</script>
				</div>

				<!-- 重复的各板块商品展示部分 -->
				<div class="listbar">
					<div class="listtitle">
						<h2>坚果R2及配件</h2>
					</div>
					<ul class="firline">
						<li>
							<a><img src="img/list1-1.jpg" /></a>
						</li>
						<li>
							<a><img src="img/list1-2.png" /></a>
							<h3>坚果R2</h3>
							<p>是下一代手机，更是下一代电脑</p>
							<b></b>
							<em>&yen;4,499.00</em>
							<i class="showtips">买赠</i>
							<aside>大促</aside>
						</li>
						<li>
							<a><img src="img/list1-3.png" /></a>
							<h3>坚果 R2</h3>
							<p>是下一代手机，更是下一代电脑</p>
							<b></b>
							<em>&yen;4,799.00</em>
							<i class="showtips">买赠</i>
							<aside>大促</aside>
						</li>
					</ul>
					<ul class="secline">
						<li>
							<a><img src="img/list1-4.jpg" /></a>
							<h3>坚果 R2 足迹系列保护套</h3>
							<p>7种主题随机发货</p>
							<b>
							</b>
							<em>&yen;59.00<del></del></em>
							<i class="showtips">满减</i>
							<aside>大促</aside>
						</li>
						<li>
							<a><img src="img/list1-5.jpg" /></a>
							<h3>坚果 R2 足迹系列保护套 联合国通过</h3>
							<p>为了那些改变人类足迹的进程</p>
							<b>
							</b>
							<em>&yen;59.00<del></del></em>
							<i>满减</i>
							<aside>大促</aside>
						</li>
						<li>
							<a><img src="img/list1-6.jpg" /></a>
							<h3>坚果 R2 足迹系列保护套 3M 开始销售</h3>
							<p>为了那些改变人类足迹的进程</p>
							<b>
							</b>
							<em>&yen;59.00<del></del></em>
							<i>满减</i>
							<aside>大促</aside>
						</li>
						<li>
							<a><img src="img/list1-7.jpg" /></a>
							<h3>坚果 R2 足迹系列保护套 圆珠笔的改进</h3>
							<p>为了那些改变人类足迹的进程</p>
							<b>
							</b>
							<em>&yen;59.00<del></del></em>
							<i>满减</i>
							<aside>大促</aside>
						</li>
					</ul>
				</div>

				<!-- 论坛部分 -->
				<div class="forum">
					<div class="fortittle">
						<h2>论坛精选</h2>
						<a><span>前往论坛&nbsp;&gt;</span></a>
					</div>
					<ul id="forumContent">
						<!-- <li>
							<a>
								<img src="img/forum1.jpg" />
								<h3>Smartisan OS v8.0.1 更新日志</h3>
								<p>Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户</p>
								<span>阅读全文&nbsp;&gt;</span>
							</a>
						</li>
						<li>
							<a>
								<img src="img/forum2.png" />
								<h3>坚果 R2 购买及使用常见问题</h3>
								<p>你关心的各种问题~</p>
								<span>阅读全文&nbsp;&gt;</span>
							</a>
						</li>
						<li>
							<a>
								<img src="img/forum3.jpg" />
								<h3>R2体验新鲜出炉，上手两小时体验</h3>
								<p>新鲜出炉上手体验</p>
								<span>阅读全文&nbsp;&gt;</span>
							</a>
						</li>
						<li>
							<a>
								<img src="img/forum4.jpg" />
								<h3>我的Smartisan手机</h3>
								<p>祝新品大卖</p>
								<span>阅读全文&nbsp;&gt;</span>
							</a>
						</li> -->
					</ul>
					<script type="text/html" id="forumTemplate">
						{{each dataList item}}
						<li>
							<a>
								<img src="{{item.img}}" />
								<h3>{{item.title}}</h3>
								<p>{{item.des}}</p>
								<span>阅读全文&nbsp;&gt;</span>
							</a>
						</li>
						{{/each}}
					</script>
				</div>
			</div>
		</section>

		<!-- 底部的信息部分 -->
		<footer>
		</footer>
		<!-- <script src="/lib/swiper-master/package/swiper-bundle.min.js"></script> -->
		<!-- <script src="/js/jquery.min.js"></script>
		<script src="/js/index.js"></script> -->
		<script src="/lib/require/require.js" data-main="/js/index"></script>
	</body>
</html>
